<template>
	<view class="login-container" :data-theme="theme()" :class="theme() || ''">
		
		<!-- 背景虚化层，与 login.vue 保持风格一致 -->
		<view class="blur-bg"></view>

		<view class="d-s-s f48 black mt50">欢迎来到{{ setting.name || '物上瘾' }}</view>

		<!-- 密码登录标题与下划线 -->
		<view class="black f34 mt60" style="font-weight: 500;">密码登录</view>
		<view class="line-red"></view>

		<!-- 表单区域 -->
		<view class="mt60">
			<view class="input-box">
				<input class="input" type="text" :adjust-position="false" v-model="form.mobile" placeholder="请输入手机号" />
			</view>
			<view class="input-box mt30">
				<input class="input" type="text" password="true" :adjust-position="false" v-model="form.password" placeholder="请输入密码" />
			</view>
		</view>

		<!-- 协议与忘记密码行 -->
		<view class="d-b-c mt30">
			<view class="d-s-s gray6" @click="isRead = !isRead">
				<image style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" v-if="isRead" :src="agreeUrl"></image>
				<image style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" v-else :src="noagreeUrl"></image>
				我已阅读<text class="xieyi-left-right" @click.stop="openProtocal('service')"> 用户手册 </text>和<text class="xieyi-left-right" @click.stop="openProtocal('privacy')"> 隐私政策 </text>
			</view>
			<view class="gray9" @click="onForgot">忘记密码</view>
		</view>

		<!-- 登录按钮 -->
		<view class="login-btn mt60">
			<button class="btn-bg-red" @click="onLogin">立即登录</button>
		</view>

		<!-- 其它登录方式链接 -->
		<view class="d-c-c mt40" style="gap: 80rpx;">
			<view class="gray6 f28" @click="gotoOneKey">一键登录</view>
			<view class="gray6 f28" @click="gotoCodeLogin">验证码登录</view>
		</view>

		<!-- 去注册 -->
		<view class="d-c-c mt60 f30" style="color:#FF2442;" @click="gotoRegister">去注册→</view>

		<!-- 社交账号登录 -->
		<view class="xieyi-box">
			<view class="bottom-box">
				<view class="other_tit d-c-c gray9 f24">社交账号登录</view>
				<view class="d-c-c mt30">
					<view class="weixin_box" @click="gotoOneKey">
						<text class="icon iconfont icon-weixin"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setting: {
					name: ''
				},
				form: {
					mobile: '',
					password: ''
				},
				isRead: false,
				noagreeUrl: '/static/login/noagree.png',
				agreeUrl: '/static/login/agree.png'
			};
		},
		onLoad() {
			this.getLoginSetting();
		},
		methods: {
			getLoginSetting() {
				let self = this;
				self._get('index/loginSetting', {}, (res) => {
					self.setting = res.data || {};
				});
			},
			openProtocal(type) {
				this.gotoPage('/pages/webview/ue?type=' + type);
			},
			onForgot() {
				// 跳转到找回密码页（复用 weblogin.vue 的找回密码流程）
				this.gotoPage('/pages/login/weblogin');
			},
			gotoOneKey() {
				this.gotoPage('/pages/login/login');
			},
			gotoCodeLogin() {
				this.gotoPage('/pages/login/weblogin');
			},
			gotoRegister() {
				// 项目采用短信登录即注册，这里跳转到验证码登录页
				this.gotoPage('/pages/login/weblogin');
			},
			onLogin() {
				let self = this;
				if (!self.isRead) {
					uni.showToast({ title: '请勾选并同意《隐私政策》和《用户手册》', icon: 'none' });
					return;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.form.mobile)) {
					uni.showToast({ title: '手机号有误，请重填', icon: 'none' });
					return;
				}
				if (!self.form.password) {
					uni.showToast({ title: '密码不能为空', icon: 'none' });
					return;
				}
				uni.showLoading({ title: '正在登录' });
				self._post(
					'user/userOpen/phoneLogin',
					{ mobile: self.form.mobile, password: self.form.password },
					(result) => {
						uni.setStorageSync('token', result.data.token);
						uni.setStorageSync('userId', result.data.loginUserVo.userId);
						// 返回到前页或首页
						let url = '/' + (uni.getStorageSync('currentPage') || 'pages/index/index');
						let pageOptions = uni.getStorageSync('currentPageOptions');
						if (pageOptions && Object.keys(pageOptions).length > 0) {
							url += '?';
							for (let k in pageOptions) { url += k + '=' + pageOptions[k] + '&'; }
							url = url.substring(0, url.length - 1);
						}
						self.gotoPage(url, 'redirect');
					},
					false,
					() => { uni.hideLoading(); }
				);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page { background-color: #fff; }
	@import './login.scss';

	/* 复用登录页背景毛玻璃效果 */
	.blur-bg {
		position: absolute;
		left: -312rpx;
		top: -210rpx;
		width: 1028rpx;
		height: 1440rpx;
		background: rgba(255, 36, 66, 0.22);
		border-radius: 0;
		filter: blur(228.2px);
		transform: scale(1.1);
		z-index: -10;
	}

	.input-box {
		// width: 100%;
		height: 112rpx;
		border-radius: 56rpx;
		background: #ffffff;
		box-shadow: 0 8rpx 24rpx 0 rgba(0, 0, 0, 0.06);
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		.input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
		}
	}
	
	.line-red {
			width: 88rpx;
			height: 20rpx;
			background: #FF2442;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-left: 40rpx;
			margin-top: -16rpx;
		}
	
	.xieyi-left-right {
			color: #FF2442;
			margin: 0 10rpx 0 10rpx;
		}

	.btn-bg-red {
		border: 1rpx solid #FF2442;
		background-color: #FF2442;
		color: #ffffff;
		font-weight: 600;
	}
	
	.login-container {
		padding: 30rpx;
	}
	
	.login-btn {
		// padding: 0 20rpx;
		// margin-left: 30rpx;
		// margin-right: 30rpx;
	}
	
	.login-btn button {
		// width: 592rpx;
	
		height: 112rpx;
		border-radius: 56rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 112rpx;
	}
	
	.login-btn button.login-btn-ali {
		height: 112rpx;
		line-height: 112rpx;
		background: #1678ff;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}
	
	.no-login-btn {
		position: fixed;
		bottom: 220rpx;
		left: 0;
		width: 100%;
	}
	
	

</style>

